<template>
	<div class="containBox">
		<div class="news">
			<div class="title">
				<span class="back" @click="goback">
					<<&nbsp;&nbsp;返回
				</span>
				<span class="exhibition">{{newsList[index].title}}</span>
				<p class="time">{{newsList[index].date}}</p>
			</div>
			<div class="text">
				{{newsList[index].text}}
			</div>
			<div class="img">
				<img :src="newsList[index].src">
			</div>
		</div>
	</div>
</template>

<script>
	export default({
		data() {
			return {
				index: this.$route.params.id,
				newsList: [
					{
						src: require("../assets/guangzhoudisplay.jpg"),
						title: "北影云步参加第三十六届广州特许加盟展",
						text: "我们展出了广受欢迎的针对餐饮连锁的数字标牌方案，这套方案包括明厨亮灶、排队叫号、智能迎宾、联屏特效以及体感游戏等。同时在展会上一些展商直接采用了我们的方案，有效的起到了更好的信息传导作用，吸引了更多的人流和订单。",
						date: "2018/03/04"
					},
					{
						src: require("../assets/fastfish.jpg"),
						title: "快鱼连锁采用北影云步的解决方案",
						text: "针对大规模的门店，我们的总部直控管理方案直接提升了广告发布的效率，并且结合联屏效果有效的提升了店面的形象。",
						date: "2018/03/04"
					},
					{
						src: require("../assets/cinema.jpg"),
						title: "为幸福蓝海影院提供整体解决方案",
						text: "从侯影区到内场通道，我们根据客户需求提供了一整套的数字标牌方案。通过拼接大屏和横幅效果的联屏，提升了侯影区的整体形象；内场通道中的一体机满足了客户单体显示的需求。",
						date: "2018/03/04"
					}
				]
			}
		},
		methods: {
			goback () {
				this.$router.go(-1);
			}
		},
		mounted () {
			var headerHeight = document.getElementsByClassName("listContain")[0].clientHeight;
			var footerHeight = document.getElementById("footer").clientHeight;
			var contentHeight = document.getElementsByClassName("news")[0].clientHeight;
			var fixedHeight = headerHeight + footerHeight;
			var avalibalHeight = window.innerHeight;
			if(fixedHeight + contentHeight < avalibalHeight) {
				document.getElementsByClassName("news")[0].style.height = avalibalHeight - fixedHeight + "px"
			}
			console.log(this.$route)
		}
	})
</script>

<style scoped>
	.containBox {
		width: 1000px;
		margin: 0 auto;
	}
	.news {
		width: 100%;
		clear: both;
	}
	.title {
		border-bottom: 1px solid #ccc;
		margin-bottom: 5px;
		padding-bottom: 20px;
		position: relative;
	}
	span.back {
		height: 26px;
		line-height: 26px;
		padding:0 10px;
		display: inline-block;
		border: 1px solid #328ecd;
		color:#328ecd;
		border-radius: 4px;
		font-family: "微软雅黑";
		font-size: 16px;
		cursor: pointer;
		position: absolute;
	}
	.exhibition {
		font-size: 22px;
	    font-weight: bold;
	    color: #545454;
	    text-align: center;
	    display: block;
	}
	.time {
		text-align: center;
		color: #999;
	}
	.text {
		text-indent: 32px;
		margin-top: 20px;
	}
	.img {
		padding: 100px;
	}
	.img img {
		display: block;
		margin: 0 auto;
	}
</style>